<template>
  <el-dialog
    :visible.sync="show"
    width="500px"
    :append-to-body="true"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <div slot="title" class="title_close">
      <!-- 日月结单 -->
      <div class="title">{{ `日月结单` }}</div>
      <img
        src="@/assets/img/icon_gb1.png"
        class="close"
        @click="hideDayMonth"
      />
    </div>
    <div class="day_month">
      <div class="option">
        <el-select v-model="accountType" placeholder="A股通账户">
          <el-option
            v-for="item in typeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-select v-model="dayStatement" placeholder="日结单">
          <el-option
            v-for="item in dayList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-date-picker v-model="date" type="month" placeholder="选择月份">
        </el-date-picker>
      </div>
    </div>
    <div class="month_list" v-for="(item,i) in 3" :key="i">
      <div class="date_bar">
        <div class="date">{{`2020年7月`}}</div>
        <img src="@/assets/img/icon_xxb.png" alt="">
      </div>
      <div class="date_item" v-for="(item,i) in 3" :key="i">
        <div class="statement_item">
          <img src="@/assets/img/icon_ri.png" alt="">
          <p>{{`港股账户（12345）`}}</p>
        </div>
        <div class="detail_day">
          <div class="day">2020-07-10</div>
          <img src="@/assets/img/icon_xy.png" alt="">
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
// import {sunMonStatement} from '@/assets/js/API/Record.js';
export default {
  props: {
    show: Boolean,
  },
  data() {
    return {
      lang: "",
      typeList: [
        {
          label: "A股通账户",
          value: "0",
        },
        {
          label: "港股账户",
          value: "1",
        },
        {
          label: "美股账户",
          value: "2",
        },
      ],
      dayList: [
        {
          label: "日结单",
          value: "0",
        },
        {
          label: "月结单",
          value: "1",
        },
        {
          label: "年结单",
          value: "2",
        },
      ],
      month: "",
      dayStatement: 0,
      accountType: 0,
      date: "2020",
      year: []
    };
  },
  created() {},
  mounted() {
    this.lang = localStorage.getItem("lang");
    var lang = localStorage.getItem("lang") == "en" ? "en" : "zh-CN";
  },
  methods: {
    hideDayMonth() {
      this.$emit("close",'dayMonthShow');
    },
    // 获取日月结单详情
    // async getStatement() {
    //   const res = await sunMonStatement({
    //       date: this.data
    //     });
    //   if(res.code != 1) return this.$message.error(res.msg);
    //   this.year = res.data.year;
    // }
  },
};
</script>
<style lang="less">
.day_month {
  .option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .el-select {
      margin-right: 20px;
      width: 100px;
      .el-input__inner {
        background-color: @LightBorderLine;
        border: none;
        color: @fff;
      }
    }
    .el-date-editor {
      width: 130px;
      .el-input__inner {
        background-color: @LightBorderLine;
        border: none;
        color: @fff;
      }
    }
  }
}
.month_list {
  padding-top: 16px;
  border-bottom: 1px solid @LightBorderLine;
  .date_bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    line-height: 30px;
    color: @fff;
    border-bottom: 1px solid @LightBorderLine;
  }
  .date_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    font-size: 12px;
    color: @fbSix;
    .statement_item {
      display: flex;
      align-items: center;
      p {
        padding-left: 8px;
      }
    }
  }
  .detail_day {
    display: flex;
    align-items: center;
  }
}
.el-dialog .el-dialog__body {
    padding: 0 30px 30px 30px;
}
</style>